<div ng-include="'partials/navbar'"></div>
<div class="row">

  <div class="col-md-9">
  <div class="panel panel-default" id="calendar-panel" data-spy="affix">
    <div class="panel-body">
      <div ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="calendar"></div>
    </div>
      
    <div class="panel-footer"> 
     <button class="btn btn-success btn-lg " data-toggle="modal" data-target="#myModal">
      Add A Recipe
    </button>
    <button class="btn btn-info btn-lg" ng-click="regenerateMealPlan()">Regenerate Meal Plan</button>
    </div>
  </div>

  </div>
  <div class="col-md-3">
  <div class="alert alert-success" ng-show="alertMessage">{{alertMessage}}</div>
    <h3><span ng-show="currentUser"> {{currentUser.name}}'s</span> Recipes</h3>
      <ul class="nav nav-stacked nav-pills" id="drag-queen">
       <li ng-repeat="recipe in recipes" makedraggable>
        <div class="recipe-card">
          <div class="recipe-image">
            <div class="recipe-overlay">
              <div class="recipe-title">
                <h3><a href="{{recipe.source}}" target="_blank">{{recipe.title}}</a></h3>
              </div>
            </div>
          </div>
      </div>
      </li>
      </ul>


</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Add A Recipe!</h4>
      </div>
      <div class="modal-body">
            <form role="form">
      <div class="form-group">
        <label for="Title">Title</label>
        <input type="text" class="form-control" id="Title" placeholder="Enter Title" ng-model="title">
        <label for="Url">Url</label>
        <input type="text" class="form-control" id="Url" placeholder="Enter Url" ng-model="url">
        <label for="Image">Image Source</label>
        <input type="text" class="form-control" id="Image" placeholder="Enter Image Source" ng-model="image">
        <label for="Date">Date</label>
            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="shortDate"  is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions"  ng-required="true" close-text="Close" ng-model="date"/>
              <span class="input-group-btn">
                <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>


      </div>
      
    </form>
      </div>
            <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="createRecipe(title,url,image,date)">Add Recipe</button>
      </div>
  </div>
  </div>
  </div>


